<template>
	<div class="accountPwdSet">
		<HeaderTop :title="`登录密码设置`"></HeaderTop>
		<div class="accountPwdSet-content">
			<div class="reminds-fonts">*在此可更改登录密码。</div>
			<div class="input-area">
				<div class="user-name">
					<img src="../../../static/images/agent-login-account.png" alt="" class="user-name-icon">
					<div class="middle-gray-line"></div>
					<input id="userName" type="password" placeholder="请输入旧密码" ref="accountInput">
				</div>
				<div class="user-name user-pwd">
					<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
					<div class="middle-gray-line"></div>
					<input id="userPwd" type="password" placeholder="请输入密码,6位或以上数字/字母/字符" ref="pwdInput">
				</div>
				<div class="user-name user-pwd">
					<img src="../../../static/images/agent-login-pwd.png" alt="" class="user-name-icon ">
					<div class="middle-gray-line"></div>
					<input id="userPwdCfm" type="password" placeholder="请确认新密码，6位或以上数字/字母/字符" ref="pwdInputCfm">
				</div>
			</div>
			<van-button id="btnCover" color="#00459E" @click="confirm" block round>确定</van-button>
		</div>
	
	</div>
</template>

<script>
import HeaderTop from '../../components/top/top';
import {Dialog,Toast} from 'vant';
export default {
	name: 'accountPwdSet',
	components: {
		HeaderTop,
	},
	data() {
		return {
		
		}
	},
	mounted() {
	
	},
	methods: {
		confirm(){
			console.log()
			if(this.$refs.accountInput.value.length === 0){
				Toast.fail('请输入帐号');
				return
			}
			if(this.$refs.pwdInput.value.length === 0){
				Toast.fail('请输入密码');
				return
			}
			if(this.$refs.pwdInputCfm.value.length === 0){
				Toast.fail('请确认密码');
				return
			}
			if(this.$refs.pwdInput.value !== this.$refs.pwdInputCfm.value){
				Toast.fail('新密码两次输入不一致');
				return
			}
			let params = {
				oldpassword:this.$refs.accountInput.value,
				password:this.$refs.pwdInput.value
			}
			this.ServerAPI.postAPI(this.API.changePwd, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						Dialog.alert({
							message: '密码修改成功',
							confirmButtonColor:'#00459E'
						}).then(() => {
							// on close
							this.ServerAPI.postAPI(this.API.logout, null, () => {
							});
							this.setLogin(false);
							this.$router.replace('/login')
						});
					}else{
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.accountPwdSet-content {
	width: 92%;
	margin: .3rem auto 0;
	.reminds-fonts {
		color: rgb(254,121,33);
	}
	.input-area {
		width: 90%;
		margin: .6rem auto 0;
		position: relative;
		
		.name-remind {
			position: absolute;
			top: -.4rem;
			font-size: .24rem;
			color: #AAAAAA;
		}
		
		.user-name {
			display: flex;
			align-items: center;
			padding: .2rem .3rem;
			border-radius: .6rem;
			background: rgb(238,238,238);
			
			.user-name-icon {
				width: .4rem;
				margin-left: .1rem;
			}
			.real-name-icon {
				width: .5rem;
				height: .5rem;
				margin-left: .1rem;
			}
			.phone-icon {
				width: .35rem;
				height: .5rem;
			}
			.qq-icon {
				width: .35rem;
			}
			.middle-gray-line {
				height: .6rem;
				width: 1px;
				background: rgba(142,142,141,.5);
				margin: 0 .2rem;
			}
			
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
				background: rgb(238,238,238);
			}
			.vc-button {
				position: absolute;
				right: .15rem;
				width: 2rem;
				height: .8rem;
				line-height: .8rem;
				font-size: .26rem;
			}
		}
		.user-pwd {
			margin-top: .4rem;
			display: flex;
			align-items: center;
			padding: .2rem .35rem;
			border-radius: .6rem;
			.user-pwd-icon {
				width: .4rem;
				margin-right: .1rem;
			}
			input {
				width: 100%;
				border: none;
				font-size: .26rem;
			}
		}
	}
}


</style>
